import React, { useEffect } from 'react';
import FormIframe from './FormIframe';
import './styles/zco_form.less';
import store from '@/store';
import useSyncState from '../hooks/useSyncState';
import styled from '@emotion/styled';
import AgentService from '@/modules/Agent';

interface IZcoForm {
	id: string | number | undefined;
	title: string | undefined;
	template?: string | number;
	detailId: string | number | undefined;
	height?: number;
}

const ZcoFormContainer = styled.div`
	height: calc(100% - 5px);
`;

const Title = styled.p`
	text-align: center;
	margin: 0;
	font-size: 13px;
	font-weight: 800;
	color: #2d2d2d;
`;

const ZcoForm = (props: IZcoForm) => {
	const { id, title, template = 1, detailId, height = 400 } = props;
	const [url, setUrl] = useSyncState<string>('');

	useEffect(() => {
		if (id) {
			const token = AgentService.token || '';
			const url = `${AgentService.configure.formUrl}/?id=${id}&token=${token}&detailId=${detailId}&url=${AgentService.configure.serviceUrl}&template=${template}&hash=${new Date().getTime()}`;
			setUrl(url);
		} else {
			setUrl('');
		}
	}, [props]);

	return (
		<ZcoFormContainer>
			<Title>{title}</Title>
			<FormIframe url={url()} />
		</ZcoFormContainer>
	);
};

export default ZcoForm;
